<template>
  <view class="pages addressBook">
    <nav-bar title='' :backBtn='false' :borderBottom='false'>
      <view slot="left" class="font-B font-22 c-00374D">通讯录</view>
      <view slot="right" v-if="list.length < 10" @tap="$navigateTo('/pages/address-book/edit')" class="jh-flex-center" style="width: 50px;height: 50px;">
        <image style="width: 13px;height: 13px;display: block;" :src="ossDomain + '/icon-add.png'"></image>
      </view>
    </nav-bar>
    <view class="addressBook-search">
      <image class="addressBook-search-bg" :src="ossDomain + '/icon-search-bg.png'" mode="scaleToFill"></image>
      <image class="addressBook-search-icon" :src="ossDomain + '/icon-search.png'"></image>
      <input class="addressBook-search-input font-17 font-B" v-model="keyword" placeholder="搜索" />
    </view>
    <scroll-view class="margin-t13" style="width: 100%;height: calc(100% - 108px);" scroll-y>
      <view class="addressBook-list font-B">
        <image class="addressBook-list-bg" :src="ossDomain + '/addressBook-item-bg.png'" mode="scaleToFill"></image>
        <block v-for="(item,index) in list">
          <view v-if="item.first_name.includes(keyword) || item.last_name.includes(keyword)" @tap="$navigateTo('/pages/address-book/edit?id='+item.id)" class="addressBook-list-item jh-align-center padding-l10 padding-r10">
            <image v-if="item.avatar" class="addressBook-avatar" :src="item.avatar"></image>
            <view v-else class="addressBook-avatar">
              <image style="width: 40px;height: 40px;display: block;" :src="ossDomain + '/addressBook-item-avatar.png'"></image>
              <view class="addressBook-avatar-text font-16 c-fff">
                <block v-if="item.first_name">{{item.first_name[0]}}</block>
                <block v-else="last_name">{{item.last_name[0]}}</block>
              </view>
            </view>
            <view class="addressBook-name padding-l10 jh-line-height font-13 c-000 jh-ellipsis">
              {{item.first_name || ''}}{{item.last_name || ''}}
            </view>
            <view class="addressBook-edit jh-line-height">
              编辑
            </view>
            <view class="jh-align-center padding-l10" style="width: 40%;">
              <view class="font-12 c-aaa padding-r13">
                电话
              </view>
              <view class="font-15 c-00374D">{{item.mobile | changPhone}}</view>
            </view>
            <view class="jh-flex">
              <view class="addressBook-btn" @tap.stop='call(item.tencent_user_id,2)' @touchstart="touchstart('videoTap',index)" @touchend="touchend('videoTap',index)">
                <image style="width: 25px;height: 25px;display: block;" :src="ossDomain + '/icon-video'+(videoTap && indexTap == index ? '-a' : '')+'.png'"></image>
                <view class="addressBook-btn-text jh-ellipsis" :style="{color: videoTap && indexTap == index ? '#00374D' : '#ccc'}">视频通话</view>
              </view>
              <view class="addressBook-btn" style="margin-left: 32px;" @tap.stop='call(item.tencent_user_id,1)' @touchstart="touchstart('audioTap',index)" @touchend="touchend('audioTap',index)">
                <image style="width: 25px;height: 25px;display: block;" :src="ossDomain + '/icon-audio'+(audioTap && indexTap == index ? '-a' : '')+'.png'"></image>
                <view class="addressBook-btn-text jh-ellipsis" :style="{color: audioTap && indexTap == index ? '#00374D' : '#ccc'}">语音通话</view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view style="height: 24px;"></view>
    </scroll-view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import { getRandomInt } from '@/utils/index.js'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
        list: [],
        keyword: '',
        audioTap: false,
        videoTap: false,
        indexTap: null
      }
    },
    computed: {
      ...mapState({
        rtcConfig: state => state.global.rtcConfig,
      }),
    },
    filters: {
      changPhone (phone) {
        let str = String(phone)
        if (str.length == 11) {
          return str.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')
        }
        return phone
      }
    },
    mounted() {
      this.show()
      
    },
    methods: {
      show() {
        this.$http.getFamily().then(res => {
          this.list = res.data
        })
      },
      call (to,type) {
        this.$http.getTencentId({tencent_user_id: to}).then(res => {
          let tencent_user_id = res.data.tencent_user_id || to
          uni.$emit("call", {
            type: 1,
            user: tencent_user_id,
            calltype: type,
          });
        })
      },
      touchstart (type, index) {
        this.indexTap = index
        if (type == 'audioTap') {
          setTimeout(()=>{
            this.audioTap = false
          },1000)
          this.audioTap = true
        }
        if (type == 'videoTap') {
          setTimeout(()=>{
            this.videoTap = false
          },1000)
          this.videoTap = true
        }
      },
      touchend (type, index) {
        setTimeout(()=>{
          this.indexTap = index
          if (type == 'audioTap') {
            this.audioTap = false
          }
          if (type == 'videoTap') {
            this.videoTap = false
          }
        },100)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding-right: 30px;
  }
  .addressBook{
    padding-left: 20px;
    &-search{
      position: relative;
      width: 100%;
      height: 45px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      border-radius: 12px;
      overflow: hidden;
      &-bg{
        width: 100%;
        height: 100%;
      }
      &-icon{
        position: absolute;
        left: 28px;
        top: 50%;
        transform: translateY(-50%);
        width: 21px;
        height: 21px;
        display: block;
      }
      &-input{
        width: 480px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 61px;
      }
    }
    &-list{
      width: 100%;
      // height: 100%;
      border-radius: 12px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      &-bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      &-item{
        border-bottom: 1px solid #ddd;
        box-sizing: border-box;
        width: 100%;
        height: 54px;
        position: relative;
        z-index: 2;
        &:last-child{
          border: 0;
        }
      }
    }
    &-avatar{
      width: 40px;
      height: 40px;
      display: block;
      position: relative;
      border-radius: 50%;
      &-text{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
      }
    }
    &-edit{
      position: absolute;
      color: #B5B5B6;
      font-size: 6px;
      left: 60px;
      bottom: 6px;
    }
    &-name{
      min-width: 118px;
      width: 25%;
      position: relative;
    }
    &-btn{
      position: relative;
      &-text{
        position: absolute;
        left: 50%;
        bottom: -12px;
        transform: translateX(-50%);
        font-size: 6px;
      }
    }
  }
</style>
